今天用fetch來練習抓取資料吧。
使用json()，其他text(),blob()，以及POST方法這次沒有練習。

使用隨機用戶產生器作為資料

照慣例先放入基本資料和節點，並建立存資料用的容器。

const url = "https://randomuser.me/api/";
const list = document.querySelector(".list"); //節點
let data = []; //存放資料用

開始抓取資料

fetch(url, {}).then(res => {
    // console.log(res);
    return res.json(); //將檔案格式處理為json並傳到下一層
}).then(jsonData => {
    // console.log(jsonData);
    data = jsonData; //把資料放入容器，這裡才是可以使用的資料
    //console.log(data["results"]);//確認要使用的資料所在位置
}).catch(err => {
    console.log(err);
});

開始使用資料吧

let showList = () => {
    let str = ""; //裝資料的容器
    data["results"].forEach(item => {
        str += `
        <img src="${item['picture']['large']}" alt="">
        <p>
        電話：${item['cell']}<br>
        email：${item['email']}
        </p>`;
    });
    list.innerHTML = str;
}

最後再把方訊放到fetch裡讓HTML開啟即執行就完成了

fetch(url, {}).then(res => {
    return res.json(); //將檔案格式處理為json並傳到下一層
}).then(jsonData => {
    data = jsonData; //把資料放入容器
    showList();
}).catch(err => {
    console.log(err);
});

完整的code

const url = "https://randomuser.me/api/";
const list = document.querySelector(".list"); //節點
let data = []; //存放資料用

fetch(url, {}).then(res => {
    // console.log(res);
    return res.json(); //將檔案格式處理為json並傳到下一層
}).then(jsonData => {
    // console.log(jsonData);
    data = jsonData; //把資料放入容器
    console.log(data["results"]);
    showList();
}).catch(err => {
    console.log(err);
});

let showList = () => {
    let str = ""; //裝資料的容器
    data["results"].forEach(item => {
        str += `
        <img src="${item['picture']['large']}" alt="">
        <p>
        電話：${item['cell']}<br>
        email：${item['email']}
        </p>`;
    });
    list.innerHTML = str;
}

呈現畫面 - 注意因為資料是隨機的，在練習時每次開啟畫面上資料都會不同

連結